<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>虚拟乐器模拟器</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#EC4899',
            accent: '#10B981',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .piano-key {
        transition: all 0.1s ease;
      }
      .piano-key-active {
        transform: translateY(5px);
      }
      .guitar-string {
        transition: all 0.1s ease;
      }
      .guitar-string-active {
        transform: scaleY(0.95) translateX(2px);
      }
      .drum-pad {
        transition: all 0.15s ease;
      }
      .drum-pad-active {
        transform: scale(0.95);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
      }
      .glow {
        animation: glow 1.5s ease-in-out infinite alternate;
      }
      @keyframes glow {
        from {
          box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
        }
        to {
          box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
        }
      }
      .fade-in {
        animation: fadeIn 0.5s ease-in;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .slide-up {
        animation: slideUp 0.5s ease-out;
      }
      @keyframes slideUp {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-dark to-gray-800 text-light min-h-screen">
  <header class="w-full py-4 px-6 bg-dark/80 backdrop-blur-md border-b border-primary/20 sticky top-0 z-50">
    <div class="container mx-auto flex justify-between items-center">
      <div class="flex items-center gap-3">
        <i class="fa-solid fa-music text-primary text-2xl"></i>
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">虚拟乐器模拟器</h1>
      </div>
      <nav>
        <ul class="flex gap-6 text-gray-300">
          <li><a href="#" class="hover:text-primary transition-colors duration-300 flex items-center gap-1"><i class="fa-solid fa-home"></i> 首页</a></li>
          <li><a href="#" class="hover:text-primary transition-colors duration-300 flex items-center gap-1"><i class="fa-solid fa-book"></i> 教程</a></li>
          <li><a href="#" class="hover:text-primary transition-colors duration-300 flex items-center gap-1"><i class="fa-solid fa-user"></i> 关于</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <!-- 乐器选择器 -->
    <section class="mb-12 fade-in">
      <div class="flex flex-wrap justify-center gap-4 mb-8">
        <button id="piano-btn" class="instrument-btn active bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-300 flex items-center gap-2">
          <i class="fa-solid fa-music"></i> 钢琴
        </button>
        <button id="guitar-btn" class="instrument-btn bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-300 flex items-center gap-2">
          <i class="fa-solid fa-guitar"></i> 吉他
        </button>
        <button id="drums-btn" class="instrument-btn bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-lg shadow-lg transition-all duration-300 flex items-center gap-2">
          <i class="fa-solid fa-drum"></i> 架子鼓
        </button>
      </div>
    </section>

    <!-- 钢琴模拟器 -->
    <section id="piano" class="instrument-section slide-up">
      <div class="relative w-full max-w-5xl mx-auto overflow-hidden rounded-xl shadow-2xl">
        <div class="bg-gradient-to-b from-gray-900 to-gray-800 p-4 border border-gray-700 rounded-t-xl">
          <h2 class="text-2xl font-bold text-center mb-2">钢琴模拟器</h2>
          <p class="text-center text-gray-400 text-sm">点击琴键或使用键盘按键 A - L 演奏</p>
        </div>
        
        <div class="piano-container relative bg-gray-900 p-4 pb-8">
          <div id="piano-keys" class="flex justify-center">
            <!-- 钢琴键将通过 JavaScript 动态生成 -->
          </div>
        </div>
      </div>
    </section>

    <!-- 吉他模拟器 -->
    <section id="guitar" class="instrument-section hidden slide-up">
      <div class="w-full max-w-4xl mx-auto bg-gradient-to-b from-gray-900 to-gray-800 rounded-xl shadow-2xl overflow-hidden">
        <div class="p-4 border border-gray-700 rounded-t-xl">
          <h2 class="text-2xl font-bold text-center mb-2">吉他模拟器</h2>
          <p class="text-center text-gray-400 text-sm">点击琴弦或使用键盘按键 Z - M 演奏</p>
        </div>
        
        <div class="guitar-container p-6">
          <div class="relative">
            <div id="guitar-neck" class="bg-gradient-to-r from-gray-700 to-gray-600 h-24 rounded-l-lg relative overflow-hidden">
              <!-- 吉他品格 -->
              <div class="absolute inset-y-0 left-1/4 w-px bg-gray-400/50"></div>
              <div class="absolute inset-y-0 left-3/8 w-px bg-gray-400/50"></div>
              <div class="absolute inset-y-0 left-1/2 w-px bg-gray-400/50"></div>
              <div class="absolute inset-y-0 left-5/8 w-px bg-gray-400/50"></div>
              <div class="absolute inset-y-0 left-3/4 w-px bg-gray-400/50"></div>
              
              <!-- 吉他弦 -->
              <div id="guitar-strings" class="absolute inset-0 flex flex-col justify-around px-4">
                <!-- 吉他弦将通过 JavaScript 动态生成 -->
              </div>
            </div>
            
            <!-- 吉他头部 -->
            <div class="bg-gradient-to-r from-gray-800 to-gray-700 h-16 w-16 rounded-tr-lg"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 架子鼓模拟器 -->
    <section id="drums" class="instrument-section hidden slide-up">
      <div class="w-full max-w-4xl mx-auto bg-gradient-to-b from-gray-900 to-gray-800 rounded-xl shadow-2xl overflow-hidden">
        <div class="p-4 border border-gray-700 rounded-t-xl">
          <h2 class="text-2xl font-bold text-center mb-2">架子鼓模拟器</h2>
          <p class="text-center text-gray-400 text-sm">点击鼓垫或使用键盘按键 1 - 9 演奏</p>
        </div>
        
        <div class="drums-container p-6">
          <div id="drum-pads" class="grid grid-cols-3 gap-4">
            <!-- 鼓垫将通过 JavaScript 动态生成 -->
          </div>
        </div>
      </div>
    </section>

    <!-- 控制面板 -->
    <section class="mt-12 bg-gray-900/80 backdrop-blur-md p-6 rounded-xl shadow-xl border border-gray-700 max-w-4xl mx-auto fade-in">
      <div class="flex flex-wrap justify-between items-center gap-4">
        <div class="volume-control flex items-center gap-3">
          <i class="fa-solid fa-volume-high text-primary"></i>
          <input type="range" id="volume" min="0" max="1" step="0.05" value="0.7" class="w-32 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary">
        </div>
        
        <div class="recorder flex items-center gap-4">
          <button id="record-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full flex items-center gap-2 transition-all duration-300">
            <i class="fa-solid fa-circle"></i> 录制
          </button>
          <button id="play-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full flex items-center gap-2 transition-all duration-300" disabled>
            <i class="fa-solid fa-play"></i> 播放
          </button>
          <button id="save-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-full flex items-center gap-2 transition-all duration-300" disabled>
            <i class="fa-solid fa-download"></i> 保存
          </button>
        </div>
        
        <div class="theme-toggle">
          <button id="theme-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-full transition-all duration-300">
            <i class="fa-solid fa-moon"></i>
          </button>
        </div>
      </div>
    </section>
  </main>

  <footer class="mt-16 bg-dark/80 backdrop-blur-md border-t border-primary/20 py-6 px-4">
    <div class="container mx-auto text-center text-gray-400">
      <p>© 2025 虚拟乐器模拟器 | 使用 HTML, CSS 和 JavaScript 构建</p>
      <div class="flex justify-center gap-4 mt-4">
        <a href="#" class="hover:text-primary transition-colors duration-300"><i class="fa-brands fa-github"></i></a>
        <a href="#" class="hover:text-primary transition-colors duration-300"><i class="fa-brands fa-twitter"></i></a>
        <a href="#" class="hover:text-primary transition-colors duration-300"><i class="fa-brands fa-instagram"></i></a>
      </div>
    </div>
  </footer>

  <script>
    // 音频上下文
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    const audioContext = new AudioContext();
    let masterGainNode = audioContext.createGain();
    masterGainNode.gain.value = 0.7;
    masterGainNode.connect(audioContext.destination);
    
    // 乐器数据
    const instruments = {
      piano: {
        keys: [
          { note: 'C', key: 'A', frequency: 261.63 },
          { note: 'D', key: 'S', frequency: 293.66 },
          { note: 'E', key: 'D', frequency: 329.63 },
          { note: 'F', key: 'F', frequency: 349.23 },
          { note: 'G', key: 'G', frequency: 392.00 },
          { note: 'A', key: 'H', frequency: 440.00 },
          { note: 'B', key: 'J', frequency: 493.88 },
          { note: 'C5', key: 'K', frequency: 523.25 },
          { note: 'D5', key: 'L', frequency: 587.33 }
        ],
        createElement(note, key) {
          const isSharp = note.includes('#');
          return `
            <div class="piano-key ${isSharp ? 'absolute bg-black h-64 w-10 -z-10 mx-[-25px] rounded-b-lg shadow-lg hover:bg-gray-800' : 'bg-white h-96 w-20 border border-gray-300 rounded-b-lg shadow-lg hover:bg-gray-100'} flex flex-col justify-end items-center p-4 cursor-pointer" 
                data-note="${note}" 
                data-key="${key}">
              <span class="text-xl font-bold ${isSharp ? 'text-white' : 'text-gray-800'}">${note}</span>
              <span class="text-xs mt-2 ${isSharp ? 'text-gray-300' : 'text-gray-500'}">${key}</span>
            </div>
          `;
        }
      },
      guitar: {
        strings: [
          { note: 'E4', key: 'Z', frequency: 329.63 },
          { note: 'B3', key: 'X', frequency: 246.94 },
          { note: 'G3', key: 'C', frequency: 196.00 },
          { note: 'D3', key: 'V', frequency: 146.83 },
          { note: 'A2', key: 'B', frequency: 110.00 },
          { note: 'E2', key: 'N', frequency: 82.41 },
          { note: 'E5', key: 'M', frequency: 659.25 }
        ],
        createElement(note, key, index) {
          const thickness = 10 - index;
          const color = `rgb(${255 - index * 30}, ${255 - index * 20}, ${200 - index * 10})`;
          return `
            <div class="guitar-string h-[${thickness}px] bg-gradient-to-r from-gray-300 to-${color} rounded-full cursor-pointer shadow-md hover:shadow-lg" 
                data-note="${note}" 
                data-key="${key}">
              <div class="absolute left-4 bg-gray-800/80 text-white text-xs px-2 py-1 rounded">${note}</div>
              <div class="absolute right-4 bg-gray-800/80 text-white text-xs px-2 py-1 rounded">${key}</div>
            </div>
          `;
        }
      },
      drums: {
        pads: [
          { sound: '底鼓', key: '1', color: '#3B82F6', frequency: 50 },
          { sound: '军鼓', key: '2', color: '#EC4899', frequency: 200 },
          { sound: '踩镲', key: '3', color: '#10B981', frequency: 1000 },
          { sound: '通鼓1', key: '4', color: '#8B5CF6', frequency: 150 },
          { sound: '通鼓2', key: '5', color: '#F59E0B', frequency: 120 },
          { sound: '通鼓3', key: '6', color: '#EF4444', frequency: 100 },
          { sound: '叮叮镲', key: '7', color: '#06B6D4', frequency: 2000 },
          { sound: '节奏镲', key: '8', color: '#14B8A6', frequency: 1500 },
          { sound: '牛铃', key: '9', color: '#A855F7', frequency: 3000 }
        ],
        createElement(sound, key, color) {
          return `
            <div class="drum-pad bg-${color} hover:bg-${color}/90 rounded-xl shadow-lg p-6 flex flex-col items-center justify-center cursor-pointer" 
                data-sound="${sound}" 
                data-key="${key}">
              <i class="fa-solid fa-drum text-4xl mb-2"></i>
              <span class="text-xl font-bold">${sound}</span>
              <span class="text-xs mt-2 bg-black/30 px-2 py-1 rounded-full">${key}</span>
            </div>
          `;
        }
      }
    };

    // 当前录音状态
    let isRecording = false;
    let recording = [];
    let startTime = 0;

    // DOM 元素
    const pianoBtn = document.getElementById('piano-btn');
    const guitarBtn = document.getElementById('guitar-btn');
    const drumsBtn = document.getElementById('drums-btn');
    const pianoSection = document.getElementById('piano');
    const guitarSection = document.getElementById('guitar');
    const drumsSection = document.getElementById('drums');
    const pianoKeys = document.getElementById('piano-keys');
    const guitarStrings = document.getElementById('guitar-strings');
    const drumPads = document.getElementById('drum-pads');
    const volumeControl = document.getElementById('volume');
    const recordBtn = document.getElementById('record-btn');
    const playBtn = document.getElementById('play-btn');
    const saveBtn = document.getElementById('save-btn');
    const themeBtn = document.getElementById('theme-btn');

    // 初始化乐器
    function initInstruments() {
      // 初始化钢琴
      instruments.piano.keys.forEach(key => {
        pianoKeys.innerHTML += instruments.piano.createElement(key.note, key.key);
      });

      // 初始化吉他
      instruments.guitar.strings.forEach((string, index) => {
        guitarStrings.innerHTML += instruments.guitar.createElement(string.note, string.key, index);
      });

      // 初始化架子鼓
      instruments.drums.pads.forEach(pad => {
        drumPads.innerHTML += instruments.drums.createElement(pad.sound, pad.key, pad.color);
      });

      // 添加事件监听器
      addEventListeners();
    }

    // 添加事件监听器
    function addEventListeners() {
      // 乐器切换
      pianoBtn.addEventListener('click', () => switchInstrument('piano'));
      guitarBtn.addEventListener('click', () => switchInstrument('guitar'));
      drumsBtn.addEventListener('click', () => switchInstrument('drums'));

      // 音量控制
      volumeControl.addEventListener('input', (e) => {
        masterGainNode.gain.value = parseFloat(e.target.value);
      });

      // 钢琴按键事件
      document.querySelectorAll('.piano-key').forEach(key => {
        key.addEventListener('mousedown', () => handleMouseDown(key, 'piano'));
        key.addEventListener('mouseup', () => handleMouseUp(key, 'piano'));
        key.addEventListener('mouseleave', () => handleMouseUp(key, 'piano'));
      });

      // 吉他弦事件
      document.querySelectorAll('.guitar-string').forEach(string => {
        string.addEventListener('mousedown', () => handleMouseDown(string, 'guitar'));
        string.addEventListener('mouseup', () => handleMouseUp(string, 'guitar'));
        string.addEventListener('mouseleave', () => handleMouseUp(string, 'guitar'));
      });

      // 鼓垫事件
      document.querySelectorAll('.drum-pad').forEach(pad => {
        pad.addEventListener('mousedown', () => handleMouseDown(pad, 'drums'));
        pad.addEventListener('mouseup', () => handleMouseUp(pad, 'drums'));
        pad.addEventListener('mouseleave', () => handleMouseUp(pad, 'drums'));
      });

      // 键盘事件
      document.addEventListener('keydown', (e) => {
        if (e.repeat) return;
        
        const activeInstrument = document.querySelector('.instrument-section:not(.hidden)').id;
        let element;
        
        if (activeInstrument === 'piano') {
          element = document.querySelector(`.piano-key[data-key="${e.key.toUpperCase()}"]`);
        } else if (activeInstrument === 'guitar') {
          element = document.querySelector(`.guitar-string[data-key="${e.key.toUpperCase()}"]`);
        } else if (activeInstrument === 'drums') {
          element = document.querySelector(`.drum-pad[data-key="${e.key}"]`);
        }
        
        if (element) {
          e.preventDefault();
          handleMouseDown(element, activeInstrument);
        }
      });

      document.addEventListener('keyup', (e) => {
        const activeInstrument = document.querySelector('.instrument-section:not(.hidden)').id;
        let element;
        
        if (activeInstrument === 'piano') {
          element = document.querySelector(`.piano-key[data-key="${e.key.toUpperCase()}"]`);
        } else if (activeInstrument === 'guitar') {
          element = document.querySelector(`.guitar-string[data-key="${e.key.toUpperCase()}"]`);
        } else if (activeInstrument === 'drums') {
          element = document.querySelector(`.drum-pad[data-key="${e.key}"]`);
        }
        
        if (element) {
          e.preventDefault();
          handleMouseUp(element, activeInstrument);
        }
      });

      // 录制控制
      recordBtn.addEventListener('click', toggleRecording);
      playBtn.addEventListener('click', playRecording);
      saveBtn.addEventListener('click', saveRecording);

      // 主题切换
      themeBtn.addEventListener('click', toggleTheme);
    }

    // 处理鼠标按下事件
    function handleMouseDown(element, instrument) {
      const note = instrument === 'piano' || instrument === 'guitar' ? element.dataset.note : element.dataset.sound;
      
      // 防止重复触发
      if (activeOscillators[note]) return;
      
      playNote(note, instrument);
    }

    // 处理鼠标释放事件
    function handleMouseUp(element, instrument) {
      const note = instrument === 'piano' || instrument === 'guitar' ? element.dataset.note : element.dataset.sound;
      stopNote(note, instrument);
    }

    // 切换乐器
    function switchInstrument(instrument) {
      // 移除所有乐器按钮的活动状态
      document.querySelectorAll('.instrument-btn').forEach(btn => {
        btn.classList.remove('active', 'bg-primary');
        btn.classList.add('bg-gray-700');
      });
      
      // 添加当前乐器按钮的活动状态
      document.getElementById(`${instrument}-btn`).classList.add('active', 'bg-primary');
      document.getElementById(`${instrument}-btn`).classList.remove('bg-gray-700');
      
      // 隐藏所有乐器部分
      document.querySelectorAll('.instrument-section').forEach(section => {
        section.classList.add('hidden');
      });
      
      // 显示当前乐器部分
      document.getElementById(instrument).classList.remove('hidden');
    }

    // 播放音符
    const activeOscillators = {};
    function playNote(note, instrument) {
      // 恢复音频上下文（如果暂停）
      if (audioContext.state === 'suspended') {
        audioContext.resume();
      }
      
      // 获取音符频率
      let frequency;
      if (instrument === 'piano' || instrument === 'guitar') {
        const item = instruments[instrument][instrument === 'piano' ? 'keys' : 'strings'].find(
          item => item.note === note
        );
        frequency = item.frequency;
      } else {
        const item = instruments.drums.pads.find(pad => pad.sound === note);
        frequency = item.frequency;
      }
      
      // 创建振荡器
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.type = instrument === 'drums' ? 'sine' : 'sine';
      oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
      
      gainNode.gain.setValueAtTime(0, audioContext.currentTime);
      gainNode.gain.linearRampToValueAtTime(0.8, audioContext.currentTime + 0.05);
      
      if (instrument === 'drums') {
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3);
      }
      
      oscillator.connect(gainNode);
      gainNode.connect(masterGainNode);
      oscillator.start();
      
      // 存储活动的振荡器
      activeOscillators[note] = { oscillator, gainNode };
      
      // 高亮当前音符
      const element = instrument === 'piano' 
        ? document.querySelector(`.piano-key[data-note="${note}"]`)
        : instrument === 'guitar' 
          ? document.querySelector(`.guitar-string[data-note="${note}"]`)
          : document.querySelector(`.drum-pad[data-sound="${note}"]`);
      
      if (element) {
        if (instrument === 'piano') {
          element.classList.add('piano-key-active');
        } else if (instrument === 'guitar') {
          element.classList.add('guitar-string-active');
        } else {
          element.classList.add('drum-pad-active');
        }
      }
      
      // 记录录音
      if (isRecording) {
        const time = audioContext.currentTime - startTime;
        recording.push({ note, instrument, time });
      }
    }

    // 停止音符
    function stopNote(note, instrument) {
      // 停止振荡器
      if (activeOscillators[note]) {
        const { oscillator, gainNode } = activeOscillators[note];
        
        if (instrument !== 'drums') {
          gainNode.gain.cancelScheduledValues(audioContext.currentTime);
          gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 0.1);
          oscillator.stop(audioContext.currentTime + 0.1);
        } else {
          oscillator.stop(audioContext.currentTime);
        }
        
        delete activeOscillators[note];
      }
      
      // 取消高亮
      const element = instrument === 'piano' 
        ? document.querySelector(`.piano-key[data-note="${note}"]`)
        : instrument === 'guitar' 
          ? document.querySelector(`.guitar-string[data-note="${note}"]`)
          : document.querySelector(`.drum-pad[data-sound="${note}"]`);
      
      if (element) {
        if (instrument === 'piano') {
          element.classList.remove('piano-key-active');
        } else if (instrument === 'guitar') {
          element.classList.remove('guitar-string-active');
        } else {
          element.classList.remove('drum-pad-active');
        }
      }
    }

    // 切换录制状态
    function toggleRecording() {
      if (!isRecording) {
        // 开始录制
        isRecording = true;
        recording = [];
        startTime = audioContext.currentTime;
        recordBtn.innerHTML = '<i class="fa-solid fa-circle"></i> 录制中...';
        recordBtn.classList.add('bg-red-700');
        recordBtn.classList.remove('bg-red-600');
        playBtn.disabled = true;
        saveBtn.disabled = true;
      } else {
        // 停止录制
        isRecording = false;
        recordBtn.innerHTML = '<i class="fa-solid fa-circle"></i> 录制';
        recordBtn.classList.remove('bg-red-700');
        recordBtn.classList.add('bg-red-600');
        
        if (recording.length > 0) {
          playBtn.disabled = false;
          saveBtn.disabled = false;
        }
      }
    }

    // 播放录音
    function playRecording() {
      if (recording.length === 0) return;
      
      const startTime = audioContext.currentTime;
      
      recording.forEach(note => {
        setTimeout(() => {
          playNote(note.note, note.instrument);
          
          // 自动停止音符（鼓除外）
          if (note.instrument !== 'drums') {
            setTimeout(() => {
              stopNote(note.note, note.instrument);
            }, 300);
          }
        }, note.time * 1000);
      });
    }

    // 保存录音
    function saveRecording() {
      if (recording.length === 0) return;
      
      const recordingData = JSON.stringify(recording);
      const blob = new Blob([recordingData], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      
      const a = document.createElement('a');
      a.href = url;
      a.download = 'music_recording.json';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }

    // 切换主题
    function toggleTheme() {
      document.body.classList.toggle('bg-gradient-to-br');
      document.body.classList.toggle('from-dark');
      document.body.classList.toggle('to-gray-800');
      document.body.classList.toggle('bg-gray-100');
      document.body.classList.toggle('text-gray-900');
      
      const isDark = document.body.classList.contains('from-dark');
      themeBtn.innerHTML = isDark ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
      
      // 更新所有元素的样式
      const elements = document.querySelectorAll('header, section, footer, .drum-pad, .piano-key, .guitar-string');
      elements.forEach(el => {
        if (isDark) {
          el.classList.remove('bg-gray-200', 'bg-white', 'border-gray-300');
          el.classList.add('bg-gray-900', 'bg-gray-800', 'border-gray-700');
        } else {
          el.classList.remove('bg-gray-900', 'bg-gray-800', 'border-gray-700');
          el.classList.add('bg-gray-200', 'bg-white', 'border-gray-300');
        }
      });
    }

    // 初始化应用
    window.addEventListener('DOMContentLoaded', () => {
      initInstruments();
      switchInstrument('piano');
    });
  </script>
</body>
</html>
    